<template>
  <div id="list">
    <!--添加按钮-->
    <el-button style="margin-top: 10px" size="mini" type="success" @click="addDialogVisible = !addDialogVisible">添加
    </el-button>
    <!--员工信息列表-->
    <el-table :data="tableData"
              style="width: 100%" height="70vh" align="center" header-align="center">
      <el-table-column label="编号" width="100" prop="id"/>
      <el-table-column label="姓名" width="150" prop="name"/>
      <el-table-column label="性别" width="150" prop="sex"/>
      <el-table-column label="出生日期" width="150" prop="birthday"/>
      <el-table-column label="家庭地址" width="200" prop="address"/>
      <el-table-column label="联系电话" width="150" prop="phone"/>
      <el-table-column label="现任岗位" width="150" prop="job"/>
      <el-table-column label="出勤天数" width="150" prop="presence" />
      <el-table-column label="状态" width="150" prop="state"/>
      <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" @change="searchStaffByName()" size="mini" style="width: auto" placeholder="输入姓名关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <!--编辑按钮-->
          <el-button class="margin-left" type="primary"
                     @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm
              confirm-button-text='是的，已确定'
              cancel-button-text='还未确定，请先取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定该员已跳槽/下岗吗？"
              @confirm="handleDelete(scope.row)">
            <!--删除按钮-->
            <el-button class="margin-left" type="danger" slot="reference">跳槽/下岗</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-row type="flex" justify="center">
      <el-col :span="12">
        <el-pagination
            style="margin: 15px 0px"
            background
            layout="prev, pager, next, jumper, total, sizes"
            :page-size="size"
            :current-page="now"
            :page-sizes="[2,4,6,8,10,12]"
            @current-change="findPage"
            @size-change="findSize"
            :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <!--添加表单-->
    <el-dialog title="添加员工" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed()">
      <el-form ref="addFormRef" :model="addForm" label-suffix=":" label-width="80px">
        <el-form-item label="员工姓名">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="员工性别">
          <el-radio-group v-model="addForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="addForm.birthday"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input type="input" v-model="addForm.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input type="input" v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="现任岗位">
          <el-input type="input" v-model="addForm.job"></el-input>
        </el-form-item>
        <el-form-item label="出勤天数">
          <el-input type="number" v-model="addForm.presence"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input type="input" v-model="addForm.state"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addStaff">添加用户</el-button>
          <el-button @click="clearAddInfo">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--修改表单-->
    <el-dialog title="修改员工" :visible.sync="updateDialogVisible" width="50%" @close="updateDialogClosed()">
      <el-form ref="editFormRef" :model="editForm" label-suffix=":" label-width="80px">
        <el-form-item label="修改姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="修改性别">
          <el-radio-group v-model="editForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="editForm.birthday"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input type="input" v-model="editForm.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input type="input" v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="现任岗位">
          <el-input type="input" v-model="editForm.job"></el-input>
        </el-form-item>
        <el-form-item label="出勤天数">
          <el-input type="number" v-model="editForm.presence"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input type="input" v-model="editForm.state"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateStaffInfo">修改用户</el-button>
          <el-button @click="clearEditInfo">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "list",
  data() {
    return {
      tableData: [], //表单数据
      search: '',  //
      addDialogVisible: false,
      updateDialogVisible: false,
      addForm: {
        name: '哈哈',
        sex: '男',
        birthday: '2020-10-10',
        address: '呵呵',
        phone: '12345678910',
        job: '摸鱼的测试',
        presence:15,
        state: '在职'
      },
      editForm: {
        name: '',
        sex: '',
        birthday: '',
        address: '',
        phone: '',
        job: '',
        presence:0,
        state: ''
      },
      total: 0,
      now: 1,
      size: 8
    }
  },
  methods: {
    async showAllStaffs(currentPage, pageSize) {  //异步请求显示所有数据
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;
      console.log(currentPage, pageSize)
      const {data: res} = await this.$http.get("staff/stafflist?currentPage=" + currentPage + "&pageSize=" + pageSize)
      console.log(res)
      if (res.data.length) {
        this.tableData = res.data
        this.total = res.total
      } else {
        this.now = this.now - 1;
        await this.showAllStaffs();
      }
    },
    findPage(now_page) {//用来处理当前页的方法,page为当前页
      this.now = now_page;
      console.log('findpage', now_page, this.now)
      this.showAllStaffs(now_page, this.size);
    },
    findSize(now_size) {//用来处理每页条数的方法,size为当前页条数
      this.size = now_size;
      console.log('findsize', now_size, this.size)
      this.showAllStaffs(this.now, now_size);
    },
    clearAddInfo() {
      this.addForm = {sex: "男"}; //默认男
    },
    clearEditInfo(){
      this.editForm = {sex:'女'};
    },
    async handleEdit(row) {
      this.updateDialogVisible = !this.updateDialogVisible //展示编辑表单
      const {data: res} = await this.$http.post('/staff/findStaffById', {
        id: row.id
      })
      // console.log(res);
      if (res.code === '200') {
        this.editForm = res.data[0]; // res.data 为嵌套对象，需要直接拿到对象值
        console.log(this.editForm)
      } else {
        this.$message.error('查询错误！')
      }
      // this.editForm = row;
    },
    async handleDelete(row) {
      const {data: res} = await this.$http.post('/staff/deleteStaffById', {
        id: row.id
      })
      if (res.code === '200') {
        await this.showAllStaffs();
        this.$message.success(res.message)
      } else {
        this.$message.error(res.message)
      }
    },
    /**
     *
     * 添加员工信息
     * */
    async addStaff() {
      let {data: res} = await this.$http.post('/staff/addStaff', {
        // node可以通过 req.body.form 拿到这个表单。 你不加{form:this.form}的话，会直接存入req.body里
        form: this.addForm
      })
      console.log(res)
      if (res.code === '200') {
        this.$message.success(res.message)
      } else {
        this.$message.success(res.message)
      }
      this.addDialogVisible = false;
      await this.showAllStaffs();
    },
    /**
     * 更新员工信息
     * @returns {Promise<void>}
     */
    async updateStaffInfo() {
      const {data: res} = await this.$http.post('/staff/updateStaff', {
        id: this.editForm.id,
        form: this.editForm
      })
      if (res.code === '200') {
        this.$message.success(res.message);
        await this.showAllStaffs();
      } else {
        this.$message.success(res.message);
      }
      this.updateDialogVisible = false;
    },
    updateDialogClosed() {
      this.updateDialogVisible = false;
    },
    addDialogClosed() {
      console.log(this.$refs.addFormRef)
      this.addForm = {};
      this.addDialogVisible = false;
    },
    async searchStaffByName(){
      const {data:res} = await this.$http.post('/staff/findStaffByName',{
        name:this.search
      })
      if(res.code === '200'){
        this.tableData = res.data;
        this.$message.success(res.message)
      }else{
        this.$message.error(res.message)
      }
    }
  },
  created() {
    this.showAllStaffs();
  }
}
</script>

<style lang="less" scoped>
.el-col-12 {
  width: auto; //默认有50% 不会居中，需要让他自适应
}

.margin-left {
  margin-left: 20px;
}
</style>